




<style lang="scss" scoped>
header {
    text-align: center;
       .mock-top{
        img{
     
            left: 10px;
            top: 18px;
        }
           
       }
    img{
         width: 25px;
         height: 25px;
         position: fixed;
         top: 18px;
         left: 54px;
    }
    input {
        margin: 10px 0;
        padding-left: 38px;
        width: 70%;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        border:none;
        background-color: #efefef;
        font-size: 15px;
    }

    span {
        color:#4bd37c;
        margin-left: 15px;
    }
}

.remen {
    width: 100%;
    margin: 0 auto;
    position: relative;

    h4 {
        margin: 10px 0;
        font-weight: normal;
    }

    div {
         
        width: 100%;
        flex-wrap: wrap;
       margin-left: -4px;
        
        span {

            width: 100%;
            display: block;
            padding: 3px 0;
            border-radius: 15px;
            color:#727272;
            margin: 5px;
            font-size: 14px;
             border-radius: 0px;
            border-bottom:1px solid #ccc ;
        }
         .van-icon{
      font-size: 20px;
        width: 30px;
        height: 30px;
    }
    }
   
    .kux{
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
       border-bottom:1px solid #ccc ;
    }
}

.tuijian {
    width: 90%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e8e7e7;

    .van-icon {
        font-size: 18px;
        width: 30px;
        height: 30px;
    }
}

.tu {
    margin-top: 10px;
    text-align: center;

    img {
        width: 95%;
        border-radius: 5px;
    }
}
</style>

<template>
    <div>
      
        <header>
               <RouterLink to="/zixun">
                <span class="mock-top"><img src="../../assets/向左箭头.png" alt=""></span>
                </RouterLink>
               <img src="../../assets/搜索.png" alt="">
            <input type="text" @input="searchInput" v-model="searchValue" placeholder="输入关键字搜索科普文章">
            <span @click="search">搜索</span>
        </header>
        <div>
            <!-- 搜索 -->
            <div v-for="(item, index) in searchData" :key="index" class="tuijian">
                <van-icon name="search" />
                {{ item.item }}
                
            </div>
        </div>
        <div class="remen">
        <!-- 渲染搜索记录 -->
            <div>
                <span v-for="(item, index) in historylist" :key="index">
                    <van-icon name="search" />
                    {{ item }}
                     <button @click="removeHistoryItem(index)" style="margin-left: 80%;position: fixed; right: 10px;; border: none; background-color: white; ">
                &times;
                  </button>
              </span>
              <!-- 清除搜索记录 -->
            </div>
              <p @click="clear" class="kux">
                    清除历史记录
              </p>
        </div>
        
  
    </div>
</template>

<script setup>
import _ from 'lodash';
import { ref } from 'vue';
import axios from '../../http/axios';
const remensearchlist = ref([])
const searchData = ref([])
const img = ref([])
import { getshi } from '@/http/http';

const clear=()=>{
    localStorage.removeItem('historylist')
    historylist.value=[]
}


const searchValue = ref('')
// 创建本地存储
const historylist = ref(JSON.parse(localStorage.getItem('historylist')) || [])
const remenlist = async () => {
    let res = await axios.get('/static/api/search/recommend_tag/', {
        params: {
            from_type: 'home_search',
            version: '10.6.8'
        }
    })
    console.log(res.data.data.hot_search_words)
    remensearchlist.value = res.data.data.hot_search_words
}
remenlist()
// 请求后台数据
const imglist = async () => {
    let res = await axios.get('/static/api/search/recommend_tag/', {
        params: {
            from_type: 'home_search',
            version: '10.6.8'
        },
    })
    console.log(res.data.data.ad)
    img.value = res.data.data.ad
}
imglist()



const search = () => {
    historylist.value.unshift(searchValue.value)
    localStorage.setItem('historylist', JSON.stringify(historylist.value))
}
const removeHistoryItem = (index) => {
    historylist.value.splice(index, 1);
    localStorage.setItem('historylist', JSON.stringify(historylist.value));
};


const searchInput = _.debounce(() => {
    getshi(searchValue.value).then(res => {
        console.log(res);
        searchData.value = res.data.data.slice(1, res.data.data.length)
        console.log(searchData.value);
    })
}, 1000)


</script>
